<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        h1 {
            position: relative;
            text-align: center;
            width: 10%;
            left: 45%;
        }

        .acc_info {
            width: 50%;
            height: 150px;
            position: relative;
            left: 25%;
            overflow: scroll;
        }

        .atm_operation {
            width: 30%;
            height: 180px;
            position: relative;
            border: 1px solid cadetblue;
            float: left;
            margin-left: 3%;
        }

        .atm_operation div {
            width: 100%;
            position: relative;
            text-align: center;
        }

        .atm_operation span, span, label {
            font-family: 黑体;
            font-weight: bold;
        }

        span {
            font-size: 30px;
        }

        .acc_oper_info {
            width: 80%;
            height: auto;
            position: relative;
            left: 10%;
        }

        .acc_search, acc_search div {
            position: relative;
            width: 100%;
            text-align: center;
        }

        .acc_oper_info table {
            text-align: center;
            width: 100%;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
        }

        .acc_oper_info table th {
            text-align: center;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        //初始化页面数据
        $(function () {
            $.get("/atm/api/account", function (jsonArr) {
                //遍历取值
                $.each(jsonArr.data, function (i, e) {
                    // alert(e.acc);
                    //创建td
                    var $td_acc = $("<td></td>").text(e.acc);
                    var $td_money = $("<td></td>").text(e.money);
                    //组装tr
                    var $tr = $("<tr></tr>").append($td_acc, $td_money);
                    //将tr放入页面表格中
                    $(".acc_info").find("tbody").append($tr);
                })
            }, "json");
        });

        //绑定存、取、转账、查询日志按钮事件
        $(function () {
            //存钱
            myBind(".atm_save", "/atm/api/account/save");

            //取钱
            myBind(".atm_take", "/atm/api/account/take");

            //转账
            $(".atm_transfer button").click(function () {
                var f = $(".atm_transfer").find("[name='f_acc']").val();
                var t = $(".atm_transfer").find("[name='t_acc']").val();
                var money = $(".atm_transfer").find("[name='money']").val();
                $.post("/atm/api/account/transfer", {f_acc: f, t_acc: t, money: money}, function (result) {
                    alert(result.msg);//操作状态提示
                    location.reload();//刷新页面
                }, "json");
            });

            //操作日志查询：
            $(".acc_search").find("button").click(function () {
                var acc = $(".acc_search").find("[name='acc']").val();
                $("#acc_show").text(acc);
                $.get("/atm/api/account/log", {acc: acc}, function (result) {
                    //拿到页面表格并初始化
                    var $tb = $(".acc_oper_info").find("tbody");
                    if (result.data.length > 0) {
                        $tb.empty();//清空原有数据
                    } else {
                        $tb.html("<tr><td colspan='4' style='text-align: center'>暂无数据</td></tr>");//无数据的提示
                    }
                    //遍历取值
                    $.each(result.data, function (i, e) {
                        //创建td
                        var $td_index = $("<td></td>").text(i + 1);
                        var $td_type = $("<td></td>").text(e.type);
                        var $td_money = $("<td></td>").text(e.money);
                        //日期处理：
                        var date = new Date(e.time);
                        var $td_time = $("<td></td>").text(date.format("yyyy-MM-dd hh:mm:ss"));
                        //组装tr
                        var $tr = $("<tr></tr>").append($td_index, $td_type, $td_money, $td_time);
                        //将tr放入页面表格中
                        $tb.append($tr);
                    })
                }, "json");
            });
        });

        //自定义事件绑定存取钱操作
        function myBind(selector, url) {
            $(selector).find("button").click(function () {
                var account = $(selector).find("[name='acc']").val();
                var money = $(selector).find("[name='money']").val();
                $.post(url, {acc: account, money: money}, function (result) {
                    alert(result.msg);//操作状态提示
                    location.reload();//刷新页面
                }, "json");
            });
        }

        //自定义日期转换故工具
        //引用：https://blog.csdn.net/saygood999/article/details/72972153
        Date.prototype.format = function (fmt) {
            //author:wangweizhen
            var o = {
                "M+": this.getMonth() + 1,                 //月份
                "d+": this.getDate(),                    //日
                "h+": this.getHours(),                   //小时
                "m+": this.getMinutes(),                 //分
                "s+": this.getSeconds(),                 //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds()             //毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        };
    </script>
</head>
<body>
<h1>ATM</h1>
<div class="acc_info">
    <table border="1" cellpadding="0" cellspacing="0" style="text-align: center;width: 100%">
        <thead>
        <tr>
            <th colspan="2">账号信息</th>
        </tr>
        <tr>
            <th>账号</th>
            <th>余额(元)</th>
        </tr>
        </thead>
        <tbody>
        <!--<tr>
            <td>10010</td>
            <td>10000</td>
        </tr>-->
        </tbody>
    </table>
</div>
<hr>
<div class="atm_operation">
    <span>存钱</span><br>
    <div class="atm_save">
        <label for="i_c_acc">账号：</label><input id="i_c_acc" type="text" name="acc"><br>
        <label for="i_c_money">金额：</label><input id="i_c_money" type="number" name="money"><br>
        <button>存钱</button>
    </div>
</div>
<div class="atm_operation">
    <span>取钱</span><br>
    <div class="atm_take">
        <label for="i_q_acc">账号：</label><input id="i_q_acc" type="text" name="acc"><br>
        <label for="i_q_money">金额：</label><input id="i_q_money" type="number" name="money"><br>
        <button>取钱</button>
    </div>
</div>
<div class="atm_operation">
    <span>转账</span>
    <div class="atm_transfer">
        <label for="i_zc_acc">转出账号：</label><input id="i_zc_acc" type="text" name="f_acc"><br>
        <label for="i_zr_acc">转入账号：</label><input id="i_zr_acc" type="text" name="t_acc"><br>
        <label for="i_zz_money">转账金额：</label><input id="i_zz_money" type="number" name="money"><br>
        <button>确认并转账</button>
    </div>
</div>
<hr style="clear: both">
<div class="acc_history">
    <div class="acc_search">
        <span>查询账户流水记录</span>
        <div>
            <label for="cx_acc">账号：</label><input id="cx_acc" type="text" name="acc">
            <button>查询</button>
        </div>
    </div>
    <div class="acc_oper_info">
        <table cellpadding="0" cellspacing="0">
            <thead>
            <tr>
                <th colspan="4">账户：[<label id="acc_show">未指定</label>]流水信息</th>
            </tr>
            <tr>
                <th>序号：</th>
                <th>操作：</th>
                <th>金额(元)：</th>
                <th>时间：</th>
            </tr>
            </thead>
            <tbody>
            <!--<tr>
                <td>1</td>
                <td>存钱</td>
                <td>10000</td>
                <td>2018-09-01 16:12:35</td>
            </tr>-->
            <tr>
                <td colspan='4' style="text-align: center">暂无数据</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>
